<template>
    <div class="container">
        <a-descriptions title="基本信息" bordered>
            <template #extra>
                <a-button type="primary" v-if="!isEdit" @click="startEdit">编辑</a-button>
                <a-button type="primary" v-if="isEdit" @click="finishEdit">确认修改</a-button>
            </template>
            <a-descriptions-item label="姓名">
                <span v-if="!isEdit">{{ basicInfo.name }}</span>
                <a-input v-if="isEdit" v-model:value="newInfo.name" allow-clear />
            </a-descriptions-item>
            <a-descriptions-item label="性别">
                <span v-if="!isEdit">{{ basicInfo.gender }}</span>
                <a-input v-if="isEdit" v-model:value="newInfo.gender" allow-clear />
            </a-descriptions-item>
            <a-descriptions-item label="出生年月">
                <span v-if="!isEdit">{{ basicInfo.birth }}</span>
                <a-input v-if="isEdit" v-model:value="newInfo.birth" allow-clear />
            </a-descriptions-item>
            <a-descriptions-item label="手机号">
                <span v-if="!isEdit">{{ basicInfo.phone }}</span>
                <a-input v-if="isEdit" v-model:value="newInfo.phone" allow-clear />
            </a-descriptions-item>
            <a-descriptions-item label="教育经历" :span="2">
                <span v-if="!isEdit">{{ basicInfo.edu }}</span>
                <a-input v-if="isEdit" v-model:value="newInfo.edu" allow-clear />
            </a-descriptions-item>
            <a-descriptions-item label="就业状态" :span="3">
                <a-badge status="processing" text="寻找工作中" />
            </a-descriptions-item>
            <a-descriptions-item label="行业">
                <span v-if="!isEdit">{{ basicInfo.kind }}</span>
                <a-input v-if="isEdit" v-model:value="newInfo.kind" allow-clear />
            </a-descriptions-item>
            <a-descriptions-item label="工作经历">
                <span v-if="!isEdit">{{ basicInfo.experience }}</span>
                <a-input v-if="isEdit" v-model:value="newInfo.experience" allow-clear />
            </a-descriptions-item>
            <a-descriptions-item label="工作地点">
                <span v-if="!isEdit">{{ basicInfo.location }}</span>
                <a-input v-if="isEdit" v-model:value="newInfo.location" allow-clear />
            </a-descriptions-item>
            <a-descriptions-item label="自我介绍">
                <span v-if="!isEdit">{{ basicInfo.intro }}</span>
                <a-textarea v-if="isEdit" v-model:value="newInfo.intro" auto-size />
            </a-descriptions-item>
        </a-descriptions>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const isEdit = ref(false)
const basicInfo = ref({
    'name': '张三',
    'gender': '男',
    'birth': '1998-07-19',
    'phone': '15511451419',
    'edu': '本科',
    'kind': '计算机',
    'experience': '某个公司1年',
    'location': '长沙',
    'intro': '这是自我介绍'
})
const newInfo = ref({})

const startEdit = () => {
    isEdit.value = true
    newInfo.value = JSON.parse(JSON.stringify(basicInfo.value))
}

const finishEdit = () => {
    basicInfo.value = newInfo.value
    isEdit.value = false
}
</script>

<style>
.container {
  height: 60vh;
}
</style>